<template>
  <div>
    <van-pull-refresh
      v-model="comment.refreshing"
      @refresh="onRefresh"
      :disabled="comment.disabled"
    >
      <div>
        <van-sticky :offset-top="1">
          <header id="header" class="aui-bar aui-bar-nav">
            <a class="aui-pull-left" @click="back">
              <span class="iconfont icon-fanhui"></span>
            </a>
            <div class="aui-title">
              <span class="aui-ftn16">评价列表 </span>
            </div>
          </header>
        </van-sticky>
        <div class="aui-padded-l-10 aui-padded-r-10">
          <div v-if="comment.data.length > 0" v-cloak>
            <div class="comment-list" v-for="(item, index) in comment.data" :key="index">
              <div class="top">
                <div class="img-outer">
                  <div class="img" :style="{'backgroundImage': item.avatar}">
                  </div>
                  <div class="name aui-text-3 aui-ftn14 aui-padded-l-10" v-text="item.nickname"></div>
                </div>
                <time class="aui-ftn12 aui-text-9" v-text="item.createtime"></time>
              </div>
              <div class="aui-padded-t-10 aui-text-3 aui-ftn14" v-html="item.content">
              </div>
              <div class="aui-padded-t-10 bb">
                  <img :src="item.image" alt="" @click="fnPreview(item.image)">
              </div>
            </div>
          </div>
          
          <div v-if="comment.isTotal && comment.data.length == 0">
            <div class="no-data aui-text-center aui-text-9">
              <i class="iconfont icon-lujing1161"></i>
              <div class="aui-ftn16">
                空空如也~
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import Product from "../../service/product.js";
export default {
  data() {
    return {
      isLoading: true,
      id: "",
      comment: {
        data: [],
        isTotal: false,
        refreshing: false,
        disabled: false
      },
    };
  },
  mounted() {
    this.init();
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.comment.disabled = this.utils.handleScroll();
    },
    onRefresh() {
      setTimeout(() => {
        this.comment.refreshing = false;
        this.init();
      }, 1000);
    },
    init: function () {
      this.id = this.$route.params.goodsId;
      this.fnGetGoodData();
    },
    fnGetGoodData: function () {
      Product.fnGetCommentList({ goods_id: this.id, isToken: false }).then(
        (res) => {
          console.log(res)
          this.isLoading = false;
          if (res && res.status) {
            this.comment.isTotal = false;
            this.comment.data = res.data;
          } else {
            this.comment.isTotal = true;
          }
        }
      );
    },
    // 预览图片
    fnPreview: function (path) {
      this.utils.fnPreviewPic([path]);
    },
  },
};
</script>
<style lang="scss" scoped>
body,
html {
  background-color: #f5f5f5;
}
.comment-list {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .img-outer {
        display: flex;
        flex-direction: row;
        align-items: center;
        .img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url('../../assets/banner.png');
          background-position: center center;
        }
      }
    }
    .bb {
      display: flex;
      flex-direction: row;
      img {
        width: 90px;
        height: auto;
        margin-right: 10px;
      }
    }
}
</style>
